<template>
    <el-row :gutter='15'>
        <el-col :span='7' :offset='1'>
            <el-row>
                <p>垂推挡位</p>
                <el-slider
                    :step='100/3'
                    :format-tooltip="formatTooltip"
                    show-stops
                    v-model='valueV'>
                </el-slider>
            </el-row>
            <el-row>
                <p>尾推挡位</p>
                <el-slider
                    :step='100/3'
                    :format-tooltip="formatTooltip"
                    show-stops
                    v-model='valueH'>
                </el-slider>
            </el-row>
            <el-row type='flex' justify='center'>
                <div>
                    <p>潜器灯光</p>
                    <el-switch
                        v-model='valueL'
                        active-text='开'
                        inactive-text='关'
                        @change='lightCtrl'>
                    </el-switch>
                </div>
                <div>&nbsp;</div>
                <div>
                    <p>中继器灯光</p>
                    <el-switch
                        v-model='valueRL'
                        active-text='开'
                        inactive-text='关'
                        @change='repeaterLightCtrl'>
                    </el-switch>
                </div>
                <div>&nbsp;</div>
                <div>
                    <p>侧翼电机</p>
                    <el-switch
                        v-model='valueW'
                        active-text='开'
                        inactive-text='关'
                        @change='wingCtrl'>
                    </el-switch>
                </div>
            </el-row>
            <el-row type='flex' justify='center'>
                <el-col :span='6'>
                    <el-button @click='functionXXX()'>b1</el-button>
                </el-col>
                <el-col :span='6'>
                    <el-button @click='functionXXX()'>b2</el-button>
                </el-col>
                <el-col :span='6'>
                    <el-button @click='functionXXX()'>b3</el-button>
                </el-col>
                <el-col :span='6'>
                    <el-button @click='functionXXX()'>b4</el-button>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span='2' :offset='1'>
            <el-row>
                <el-button class='button1' id='up' @click='upward()'>
                    <el-tooltip effect='dark' content='上浮' placement='top'>
                    <svg t='1658546651450' class='icon' viewBox='0 0 1024 1024' version='1.1'
                         xmlns='http://www.w3.org/2000/svg' p-id='3706' width='32' height='32'>
                        <path
                            d='M199.36 572.768a31.904 31.904 0 0 0 22.624-9.376l294.144-294.144 285.728 285.728a31.968 31.968 0 1 0 45.248-45.248l-308.352-308.352a32 32 0 0 0-45.28 0l-316.768 316.768a31.968 31.968 0 0 0 22.656 54.624z'
                            p-id='3707' fill='#ffffff'></path>
                        <path
                            d='M538.784 457.376a32 32 0 0 0-45.28 0l-316.768 316.768a31.968 31.968 0 1 0 45.248 45.248l294.144-294.144 285.728 285.728a31.968 31.968 0 1 0 45.248-45.248l-308.32-308.352z'
                            p-id='3708' fill='#ffffff'></path>
                    </svg>
                    </el-tooltip>
                </el-button>
            </el-row>
            <el-row>
                <el-button class='button1' id='down' @click='downward()'>
                    <el-tooltip effect='dark' content='下潜' placement='bottom'>
                    <svg t='1658546666523' class='icon' viewBox='0 0 1024 1024' version='1.1'
                         xmlns='http://www.w3.org/2000/svg' p-id='3893' width='32' height='32'>
                        <path
                            d='M493.504 558.144a31.904 31.904 0 0 0 45.28 0l308.352-308.352a31.968 31.968 0 1 0-45.248-45.248l-285.728 285.728-294.176-294.144a31.968 31.968 0 1 0-45.248 45.248l316.768 316.768z'
                            p-id='3894' fill='#ffffff'></path>
                        <path
                            d='M801.888 460.576l-285.728 285.728-294.144-294.144a31.968 31.968 0 1 0-45.248 45.248l316.768 316.768a31.904 31.904 0 0 0 45.28 0l308.352-308.352a32 32 0 1 0-45.28-45.248z'
                            p-id='3895' fill='#ffffff'></path>
                    </svg>
                    </el-tooltip>
                </el-button>
            </el-row>
        </el-col>
        <el-col :span='7' type='flex' :offset='1'>
            <el-row type='flex' justify='center'>
                <!--                <el-button class="button2" id="forward" icon="el-icon-top">前进</el-button>-->
                <el-button class='button2' id='forward' @click='forward()'>
                    <el-tooltip effect='dark' content='前进' placement='top'>
                        <svg t='1658546802753' class='icon' viewBox='0 0 1024 1024' version='1.1'
                             xmlns='http://www.w3.org/2000/svg' p-id='1757' width='32' height='32'>
                            <path d='M65.582671 735.208665l446.417329-446.41733 446.417329 446.41733z' p-id='1758'
                                  fill='#ffffff'></path>
                        </svg>
                    </el-tooltip>
                </el-button>
            </el-row>
            <el-row type='flex' justify='center'>
                <!--                <el-button class="button2" id="left" icon="el-icon-back">左转</el-button>-->
                <el-button class='button2' id='left' @click='turnLeft()' icon='el-icon-my-left'>
                    <el-tooltip effect='dark' content='左转' placement='left'>
                        <svg t='1658546822377' class='icon' viewBox='0 0 1024 1024' version='1.1'
                             xmlns='http://www.w3.org/2000/svg' p-id='2129' width='32' height='32'>
                            <path d='M735.208665 65.582671l-446.41733 446.417329 446.41733 446.417329z' p-id='2130'
                                  fill='#ffffff'></path>
                        </svg>
                    </el-tooltip>
                </el-button>
                <!--                <el-button class="button2" id="stop" icon="el-icon-sort">停止</el-button>-->
                <el-button class='button2' id='stop' @click='stop()'>
                    <el-tooltip effect='dark' content='停止' placement='stop'>
                        <svg t='1658546300320' class='icon' viewBox='0 0 1024 1024' version='1.1'
                             xmlns='http://www.w3.org/2000/svg' p-id='9962' width='32' height='32'>
                            <path
                                d='M258.875 174.5h506.25c46.58203125 0 84.375 37.79296875 84.375 84.375v506.25c0 46.58203125-37.79296875 84.375-84.375 84.375H258.875c-46.58203125 0-84.375-37.79296875-84.375-84.375V258.875c0-46.58203125 37.79296875-84.375 84.375-84.375z'
                                fill='#ffffff' p-id='9963'></path>
                        </svg>
                    </el-tooltip>
                </el-button>
                <!--                <el-button class="button2" id="right" icon="el-icon-right">右转</el-button>-->
                <el-button class='button2' id='right' @click='turnRight()' icon='el-icon-my-right'>
                    <el-tooltip effect='dark' content='右转' placement='right'>
                        <svg t='1658546769638' class='icon' viewBox='0 0 1024 1024' version='1.1'
                             xmlns='http://www.w3.org/2000/svg' p-id='1385' width='32' height='32'>
                            <path d='M288.791335 65.582671l446.41733 446.417329-446.41733 446.417329z' p-id='1386'
                                  fill='#ffffff'></path>
                        </svg>
                    </el-tooltip>
                </el-button>
            </el-row>
            <el-row type='flex' justify='center'>
                <!--                <el-button class="button2" id="back" icon="el-icon-bottom">后退</el-button>-->
                <el-button class='button2' id='back' @click='backward()' icon='el-icon-my-backward'>
                    <el-tooltip effect='dark' content='后退' placement='bottom'>
                        <svg t='1658546786078' class='icon' viewBox='0 0 1024 1024' version='1.1'
                             xmlns='http://www.w3.org/2000/svg' p-id='1571' width='32' height='32'>
                            <path d='M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z' p-id='1572'
                                  fill='#ffffff'></path>
                        </svg>
                    </el-tooltip>
                </el-button>
            </el-row>
        </el-col>
        <el-col :span='4' :offset='1'>
            <el-row type='flex' style='padding: 0; margin: 0 0'>
                <el-col :span='9' style='padding: 0; margin: 0 0'>
                    <el-button class='button4' @click='freezeHeight()'>定高</el-button>
                </el-col>
                <el-col :span='9' style='padding: 0; margin: 0 0'>
                    <el-button class='button4' @click='freezeDepth()'>定深</el-button>
                </el-col>
            </el-row>
            <el-row type='flex'>
                <el-button id='decoupled' class='button3' @click='release()'>脱钩</el-button>
            </el-row>
            <el-row type='flex'>
                <el-button class='button3'>
                    <router-link :to="'/digitalRadio'">
                        数传电台
                    </router-link>
                </el-button>
            </el-row>
        </el-col>
        <div v-if='mode === "game"'>
            <operator-guide></operator-guide>
        </div>
        <!--        <el-col :span="4">-->
        <!--            <el-row type="flex">-->
        <!--                <el-button circle type="success" icon="el-icon-check" style="width: 32px; height: 32px; margin: auto auto;"></el-button>-->
        <!--                <label style="margin: auto auto;">抛载信号</label>-->
        <!--            </el-row>-->
        <!--            <el-row type="flex">-->
        <!--                <el-button circle type="success" icon="el-icon-check" style="width: 32px; height: 32px; margin: auto auto;"></el-button>-->
        <!--                <label style="margin: auto auto;">抛载信号</label>-->
        <!--            </el-row>-->
        <!--        </el-col>-->
    </el-row>
</template>

<script>

import OperatorGuide from '@/components/common/dashboards/OperatorGuide';
import Qs from 'qs'

export default {
    name: 'OperatorPanel',
    props: {
        'mode': {
            type: String,
            Default: 'game'
        }
    },
    data() {
        return {
            valueW: false, // wing
            valueL: false, //light
            valueRL: false, //repeater light
            valueV: 1, // 垂直推进器挡位
            valueH: 1 //水平推进器挡位
        };
    },
    created() {
    },
    components: {
        OperatorGuide
    },
    methods: {
        freezeHeight: function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/freezeHeight/').then((res) => {
                if (res.data.status !== 200) {
                    this.$message.error('连接错误，定高指令未传达');
                } else {
                    this.$message.success('定高指令已传达');
                }
            }).catch((error) => {
                this.$message.error('无法连接到鱼体，定高指令未传达');
            });
        },
        freezeDepth: function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/freezeDepth/').then((res) => {
                if (res.data.status !== 200) {
                    this.$message.error('连接错误，定深指令未传达');
                } else {
                    this.$message.success('定深指令已传达');
                }
            }).catch((error) => {
                this.$message.error('无法连接到鱼体，定深指令未传达');
            });
        },
        forward: function() {
            let gear = {
                num: this.formatTooltip(this.valueH)
            }
            // 从接口获取数据并添加到数组
            this.$axios.post(
                this.GLOBAL.serverIp + '/api/forward/',
                Qs.stringify(gear)
            ).then((res) => {
                if (res.data.status !== 200) {
                    this.$message.error('连接错误，前进指令未传达');
                } else {
                    this.$message.success('前进指令已传达');
                }
            }).catch((error) => {
                this.$message.error('无法连接到鱼体，前进指令未传达');
            });
        },
        backward: function() {
            let gear = {
                num: this.formatTooltip(this.valueH)
            }
            // 从接口获取数据并添加到数组
            this.$axios.post(
                this.GLOBAL.serverIp + '/api/backward/',
                Qs.stringify(gear)
            ).then((res) => {
                if (res.data.status !== 200) {
                    this.$message.error('连接错误，后退指令未传达');
                } else {
                    this.$message.success('后退指令已传达');
                }
            }).catch((error) => {
                this.$message.error('无法连接到鱼体，后退指令未传达');
            });
        },
        upward: function() {
            let gear = {
                num: this.formatTooltip(this.valueV)
            }
            // 从接口获取数据并添加到数组
            this.$axios.post(
                this.GLOBAL.serverIp + '/api/upward/',
                Qs.stringify(gear)
            ).then((res) => {
                if (res.data.status !== 200) {
                    this.$message.error('连接错误，上浮指令未传达');
                } else {
                    this.$message.success('上浮指令已传达');
                }
            }).catch((error) => {
                this.$message.error('无法连接到鱼体，上浮指令未传达');
            });
        },
        downward: function() {
            let gear = {
                num: this.formatTooltip(this.valueV)
            }
            // 从接口获取数据并添加到数组
            this.$axios.post(
                this.GLOBAL.serverIp + '/api/downward/',
                Qs.stringify(gear)
            ).then((res) => {
                if (res.data.status !== 200) {
                    this.$message.error('连接错误，下潜指令未传达');
                } else {
                    this.$message.success('下潜指令已传达');
                }
            }).catch((error) => {
                this.$message.error('无法连接到鱼体，下潜指令未传达');
            });
        },
        stop: function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/stop/').then((res) => {
                if (res.data.status !== 200) {
                    this.$message.error('连接错误，停止指令未传达');
                } else {
                    this.$message.success('停止指令已传达');
                }
            }).catch((error) => {
                this.$message.error('无法连接到鱼体，停止指令未传达');
            });
        },
        turnLeft: function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/turnLeft/').then((res) => {
                if (res.data.status !== 200) {
                    this.$message.error('连接错误，左转指令未传达');
                } else {
                    this.$message.success('左转指令已传达');
                }
            }).catch((error) => {
                this.$message.error('无法连接到鱼体，左转指令未传达');
            });
        },
        turnRight: function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/turnRight/').then((res) => {
                if (res.data.status !== 200) {
                    this.$message.error('连接错误，右转指令未传达');
                } else {
                    this.$message.success('右转指令已传达');
                }
            }).catch((error) => {
                this.$message.error('无法连接到鱼体，右转指令未传达');
            });
        },
        release: function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.repeaterIP + '/api/release/').then((res) => {
                if (res.data.status !== 200) {
                    this.$message.error('连接错误，脱钩指令未传达');
                } else {
                    this.$message.success('脱钩指令已传达');
                }
            }).catch((error) => {
                this.$message.error('无法连接到鱼体，脱钩指令未传达');
            });
        },
        wingCtrl: function() {
            let v1 = this.valueW;
            if (v1) {
                this.$axios.get(this.GLOBAL.serverIp + '/api/wingOpen/').then((res) => {
                    if (res.data.status !== 200) {
                        this.$message.error('连接错误，侧翼开启指令未传达');
                    } else {
                        this.$message.success('侧翼开启指令已传达');
                    }
                }).catch((error) => {
                    this.$message.error('无法连接到鱼体，侧翼开启指令未传达');
                    this.valueW = 1;
                });
            } else {
                this.$axios.get(this.GLOBAL.serverIp + '/api/wingClose/').then((res) => {
                    if (res.data.status !== 200) {
                        this.$message.error('连接错误，侧翼关闭指令未传达');
                    } else {
                        this.$message.success('侧翼关闭指令已传达');
                    }
                }).catch((error) => {
                    this.$message.error('无法连接到鱼体，侧翼关闭指令未传达');
                    this.valueW = 0;
                });
            }
            this.valueW = v1;
        },
        lightCtrl: function() {
            let v1 = this.valueL;
            if (v1) {
                this.$axios.get(this.GLOBAL.serverIp + '/api/lightOpen/').then((res) => {
                    if (res.data.status !== 200) {
                        this.$message.error('连接错误，侧翼开启指令未传达');
                    } else {
                        this.$message.success('侧翼开启指令已传达');
                    }
                }).catch((error) => {
                    this.$message.error('无法连接到鱼体，侧翼开启指令未传达');
                    this.valueL = 1;
                });
            } else {
                this.$axios.get(this.GLOBAL.serverIp + '/api/lightClose/').then((res) => {
                    if (res.data.status !== 200) {
                        this.$message.error('连接错误，侧翼关闭指令未传达');
                    } else {
                        this.$message.success('侧翼关闭指令已传达');
                    }
                }).catch((error) => {
                    this.$message.error('无法连接到鱼体，侧翼关闭指令未传达');
                    this.valueL = 0;
                });
            }
            this.valueL = v1;
        },
        repeaterLightCtrl: function() {
            let v1 = this.valueRL;
            if (v1) {
                this.$axios.get(this.GLOBAL.repeaterIP + '/api/repeaterLightOpen/').then((res) => {
                    if (res.data.status !== 200) {
                        this.$message.error('连接错误，侧翼开启指令未传达');
                    } else {
                        this.$message.success('侧翼开启指令已传达');
                    }
                }).catch((error) => {
                    this.$message.error('无法连接到鱼体，侧翼开启指令未传达');
                    this.valueRL = 1;
                });
            } else {
                this.$axios.get(this.GLOBAL.repeaterIP + '/api/repeaterLightClose/').then((res) => {
                    if (res.data.status !== 200) {
                        this.$message.error('连接错误，侧翼关闭指令未传达');
                    } else {
                        this.$message.success('侧翼关闭指令已传达');
                    }
                }).catch((error) => {
                    this.$message.error('无法连接到鱼体，侧翼关闭指令未传达');
                    this.valueRL = 0;
                });
            }
            this.valueRL = v1;
        },
        functionXXX: function() {
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/xxx/').then((res) => {
                if (res.data.status !== 200) {
                    //
                } else {
                    //
                }
            }).catch((error) => {
                //
            });
        },
        formatTooltip(val) {
            if (parseInt(3 * val / 100) <= 0) {
                return 5
            }
            return parseInt(3 * val / 100) * 10; // val初始100
        },
    }
};
</script>


<style scoped>

.el-row {
    margin-top: 10px;
    margin-bottom: 10px;
}

.button1 {
    height: 100px;
    width: 70px;
}

.button2 {
    height: 70px;
    width: 70px;
}

.button3 {
    width: 100px;
    height: 65px;
}


.button4 {
    width: 50px;
    height: 65px;
    padding: 0;
    margin: 0 0;
}

>>> .el-slider__runway {
    background-color: #403D39; /* 滑块颜色 */
}

>>> .el-slider__stop { /*  滑块节点的颜色 */
    background-color: gray;
}

>>> .el-slider__bar {
    background-color: #064079; /*  滑块滑过来的颜色 */
}

.el-button {
    background-color: transparent; /* 按钮背景颜色 */
    color: white;
}

>>> .el-switch__core {
    background-color: #403D39; /* 开关关闭时的颜色 */
    border: none;
}

>>> .el-switch.is-checked .el-switch__core { /* 开关打开时的颜色 */
    background-color: #064079;
}

* {
    color: white;
    font-size: 15px;
}
</style>
